<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.安装vue-router@3 -S
        // 2.引入vue-router
        // 3.use(VueRouter)
        // 4.实例化 vue-router对象
        // 5.配置路由规则
            // mode : history  hash
            // routes :[{},{}]
        // 6.显示路由加载的组件
            // <router-view></router-view>

        // 7.router-link 组件
        // to 跳转路径
        // 支持 动态属性 
        // 可以通过linkActiveClass 修改 类名
        // tag属性修改标签名
        // 8.路由传参 
        // 1. params 
        // name="张三" id=3
        // 路由传参 地址/:参数下标  接收this.$route.params
        // 2.querystring :get参数
        // 路由的监听，监听路由的变化
        // watch :{$route}
        // router  routes route
        // $route 和路由参数有关，获取路由相关信息
        // $router 和js跳转操作有关系
        // location.href= "a.html"
        // location.history.go()  操作地址栏历史记录
        // back go  foward
        // $router  $route routes:[]


        // 9 .路由懒加载 和 嵌套路由
        // 路由懒加载
        // const Com = ()=>import("路径");
        // import "a.js"
        // import "b.js"
        // 嵌套路由
        // 1.嵌套路由不能加"/" 2.需要一个router-view 显示 子路由组件



        // 10.路由守卫 
        // 1.组件路由守卫  2.独享型路由守卫 3.全局路由守卫
        // 1.组件路由守卫：路由的生命周期
        // 2.独享型路由守卫:配置在路由里
        // 3.全局路由守卫


        // 自动安装 vue 插件  vue add router
</script>
</body>
</html>